<template>
  <div class="home">
    <h1>生命周期</h1>
    <h2>{{ num.a }}</h2>
    <button @click="num.a++">+1</button>
    <ul>
      <li>创建期间生命函数：</li>
      <li>beforeCreate():刚从内存创建出来 此时，还没有初始化好 data 和 methods 属性</li>
      <li>
        created():实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，
        <span>一般在这里请求数据</span>
      </li>
      <li>beforeMount():此时已经完成了模板的编译，但是还没有挂载到页面中</li>
      <li>
        mounted():此时，已经将编译好的模板，挂载到了页面指定的容器中显示
        <span>如果需要操作原生dom 可以在这操作</span>
      </li>
      <li>更新期间生命函数：</li>
      <li>beforeUpdate():状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点</li>
      <li>updated():此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了</li>
      <li>销毁生命函数：</li>
      <li>
        beforeDestroy():Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        <span>在这销毁定时器等</span>
      </li>
      <li>destroyed():Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: { a: 1 },
    };
  },
  watch: {
    num: {
      handler(newName, oldName) {
        console.log(newName, oldName);
      },
      // 绑定后立即立即调用
      immediate: true,
      // 深度监听
      deep: true,
    },
  },
  beforeCreate() {
    this.$store.commit("setTimes", Number(new Date()));
    console.log(`beforeCreate:刚从内存创建出来 this.num:${this.num}`);
  },
  created() {
    console.log(
      " created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板"
    );
    console.log(
      `created与beforeCreate间隔${Number(
        new Date() - this.$store.state.time
      )}毫秒，this.num:${this.num}`
    );
    this.$store.commit("setTimes", Number(new Date()));
  },
  beforeMount() {
    console.log(
      "beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中"
    );
    console.log(
      `created与beforeMount间隔${Number(
        new Date() - this.$store.state.time
      )}毫秒，this.num:${this.num}`
    );
    this.$store.commit("setTimes", Number(new Date()));
  },
  mounted() {
    console.log(
      "mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示"
    );
    console.log(
      `mounted与beforeMount间隔${Number(
        new Date() - this.$store.state.time
      )}毫秒，this.num:${this.num}`
    );
    this.$store.commit("setTimes", Number(new Date()));
    console.log("---------------");
    console.log("以上就是创建期间的生命周期函数");
  },
  beforeUpdate() {
    console.log("开始更新------------");
    console.log(
      `+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点${this.num}`
    );
  },
  updated() {
    console.log(
      `     + updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！${this.num}`
    );
    console.log("更新结束------------");
  },
  beforeDestroy() {
    console.log(
      `      + destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。${this.num} `
    );
  },
  destroyed() {
    console.log(
      `Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。${this.num}`
    );
    // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
  },
};
</script>
<style lang="scss" scoped>
.home {
  text-align: center;
  font-size: 15px;
  overflow: auto;
  height: 1000px;
  li {
    margin-top: 10px;
  }
  span {
    color: rgb(167, 40, 40);
  }
}
</style>